<template>
  <div class="imgs" :class="{part:part}" style="display: flex; width: 100%;   margin: 10px auto;">
    <div class="cards">
      <div v-for="f in content.fileList" :key="f.id" class="img-item" :style="{'width':f.perWidth}">
        <img v-if="f.format==='img'" @click="choose=f.id" class="img-item-content"
             :src="'http://localhost:8001/file/getResource?id='+f.id">
        <video v-else-if="f.format==='video'" controls preload="none" class="img-item-content"
               :src="'http://localhost:8001/file/getResource?id='+f.id"></video>
      </div>
    </div>
    <div v-if="choose!==''" class="click-detail" @click="choose=''">
      <background/>
      <img :src="'http://localhost:8001/file/getResource?id='+choose">
    </div>
  </div>
</template>

<script>
import Background from "@/components/background";
import {computeHeight, reComputeHeight} from "@/util/funcutils";

export default {
  name: "content-img",
  components: {Background},
  props: ['content', 'part'],
  data() {
    return {
      choose: '',
      percent: []
    }
  },
  beforeMount() {
    window.onresize = () => {
      reComputeHeight(this.percent, this.content.fileList, 4)
    }
  },
  mounted() {
    computeHeight(this.percent, this.content.fileList, 4)
  }
}
</script>

<style scoped>

.cards {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;
  overflow: scroll;
  scrollbar-width: none;
}

.img-item {
  padding: 1px 2px;
  height: fit-content;
}

.img-item-content {
  border-radius: 10px;
  width: 100%;
}

.imgs.part {
  max-height: 600px;
  overflow: scroll;
  scrollbar-width: none;
}

.imgs.part::-webkit-scrollbar {
  display: none;
}

.click-detail > img {
  position: fixed;
  z-index: 1001;
  top: 5%;
  left: 0;
  right: 0;
  margin: auto;
  max-width: 92%;
  max-height: 92%;
}
</style>